<template>
<div>
 <div class="box" v-if="isShow">
  <img src="http://liufusong.top:8080/img/profile/bg.png" alt="">
  <div class="login">
  <div>
    <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
  </div>
  <p>游客</p >
  <button class="btn" @click="clickFn">去登录</button>
  </div>
</div>

<div class="box" v-else>
 <img src="http://liufusong.top:8080/img/avatar.png" alt="">
  <div class="login">
  <div>
    <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
  </div>
  <p>好客_508871</p >
  <button class="btn" @click="tcFn">退出</button>
  <p class="edit">编辑个人资料</p >
  </div>
</div>
  
  <van-grid  :column-num="3"  :border="false">
  <van-grid-item icon="star-o" text="我的收藏" to="/collect" />
  <van-grid-item icon="wap-home-o" text="我的出租" to="/manage" />
  <van-grid-item icon="browsing-history-o" text="看房记录" />
  <van-grid-item icon="idcard" text="成为房主" />
  <van-grid-item icon="manager-o" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />
</van-grid>
   
  <div class="pic1">
    <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
  </div>
      </div>      
</template>

<script>
import {getItem,delItem,key} from "@/utils/storage"
export default {
    data() {
        return {
          token:'',
            isShow: true
        };
    },
    created () {
    this.token = getItem(key)
    if (this.token !== null) {
      this.isShow = !this.isShow
    }
  },
    methods:{
        clickFn () {
      this.$router.push({
        path: '/login'
      })
    },
    tcFn () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定弹出'
      })
        .then(() => {
          // on confirm
          // 清除本地存储的token
          delItem(key)
          this.$router.push('/login')
        }) 
        .catch(() => {
    // on cancel
  });
    }
    }
};
</script>

<style lang="less"  scoped>

.box{
  // overflow: hidden;
  height: 300px;
  position:relative;
  img{
  width: 100%;
  }
  .login{
position:absolute ;
bottom:0;
left:18px;
height: 165px;
width: 300px;
background-color:#fff;
box-shadow: 0 0 10px 3px #ddd;
padding: 0 20px;
margin:50px 0 0;
.edit{
  margin-top: 20px;
  color: #9b9b9b;
}
div{
  background-color: #fff;
  img{
  position: absolute;
  top:-30px;
  left:40%;
  width: 60px;
  height: 60px;
}
}
p{
  text-align: center;
  font-size: 14px;
  margin-top: 40px;
}
.btn{
  background-color:#58b57f;
  color:#fff;
  border-radius: 5px;
  border: none;
  margin-left: 120px;
  margin-top: 15px;
  font-size: 16px;
}
  }
}
.pic1 {
    img {
        width: 345px;
        height: 85px;
        margin-left: 15px;
        margin-top: 20px;
    }
}
</style>
